<template>
  <div>
    <h2>Foo 组件</h2>
    <p>Foo 的 a {{ a }}</p>
    <p>Foo 的 abc {{ abc }}</p>
    <p>{{ count }}</p>
    <p>{{ message }}</p>
    <p>{{ remaning }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
  export default {
    methods: {
      increment () {
        /**
         * 点击后无法被 vuex 插件检查到
         */
        // this.$store.state.count++
        this.$store.commit({ type: 'increment'})
      }
    },
    computed: {
      // 组件内部自己的message
      message () {
        return 'hello'
      },
      ...mapGetters(['remaning']),
      ...mapState({
        count: 'count',
        // 等价于 state => staet.message
        message: 'message'
      }),
      ...mapState('foo', {
        a: 'a'
      }),
      // 把foo模块的abc映射到当前组件
      ...mapGetters('foo', ['abc'])
      // count () {
      //   return this.$store.state.count
      // }
    }
  }
</script>

<style>

</style>